<template>
	<div class="content">
		<div class="clear">
			<Form :model="query" label-position="left" :label-width="100">
				<Input v-model="query.id" class="w200 m-r10" placeholder="提现编号"></Input>
				<Input v-model="query.userName" class="w200 m-r10" placeholder="个人ID"></Input>
				<Select placeholder="请选择提现状态" class="w200 m-r10" v-model="query.state">
					<Option value="0">全部</Option>
					<Option value="1">成功</Option>
					<Option value="2">失败</Option>
					<Option value="3">待审核</Option>
					<Option value="4">已审核</Option>
					<Option value="5">转账中</Option>
				</Select>
				<DatePicker type="daterange" split-panels placeholder="请选择时间段" class="w200 m-r10" format="yyyy-MM-dd HH:mm:ss" @on-change="getTime">
				</DatePicker>
				<Button type="primary" v-on:click="getConditionQuery">查询</Button>
			</Form>
		</div>
		<fieldset>
			<legend>总钱包信息</legend>
			<div>
				<table>
					<tbody>
						<tr>
							<td>总钱包地址：
								<span class="blue" v-text="walletInfo.address == null ? 0 : walletInfo.address">0</span>
							</td>
							<td class="left-200">USDT余额：
								<span class="blue" v-text="walletInfo.balance == null ? 0 : walletInfo.balance">0</span>
							</td>
						</tr>

					</tbody>
				</table>
			</div>
		</fieldset>
		<fieldset>
			<legend>提币汇总</legend>
			<div>
				<table>
					<tbody>
						<tr>
							<td>累计USDT提币数量：
								<span class="blue" v-text="moneySummary.successNum == null ? 0 : moneySummary.successNum">0</span>
							</td>
							<td class="left-300">累计USDT提币手续费：
								<span class="blue" v-text="moneySummary.sumFee == null ? 0 : moneySummary.sumFee">0</span>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</fieldset>
		<Button class="daochu" type="primary" size="large" @click="exportData">
            <Icon type="ios-download-outline"></Icon>导出
		</Button>
		<Table stripe :columns="columns" :data="conditionQuery" ref="table"></Table>
		<Page :total="info" show-elevator :page-size="pageSize" show-total @on-change="cuctGetQuery"></Page>
		<Modal
	        v-model="model"
	        title="确认操作"
	        :loading="loading"
	        @on-ok="asyncOK">
	        <p>是否同意审核通过?</p>
	    </Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				walletInfo: '', // 总钱包信息
				moneySummary: '', // 提币汇总
				dataValue: [], // 时间段值
				query: {
					id: '', // 提现编号
					userName: '', // 用户名
					state: '' // 选择提现状态
				},
				conditionQuery: [], // 条件查询的结果
				info: null, // 总条数
				page: 1, // 页数
				pageSize: 20, // 每页多少条
				model: false,
				loading: true,
				modelIndex: '', // 审核成功时候需要用到的 ID
				value: '', // 审核失败的时候填入的值
				columns: [{
						title: '提现编号',
						key: 'id',
						align: 'center',
					},
					{
						title: '个人ID',
						key: 'uuid',
						align: 'center',
					},
					{
						title: '提现数量',
						key: 'num',
						align: 'center',
					},
					{
						title: '手续费',
						key: 'appFee',
						align: 'center',
					},
					{
						title: '到账数量',
						key: 'actualNum',
						align: 'center',
					},
					{
						title: '接收钱包地址',
						key: 'toAddress',
						align: 'center',
					},
					{
						title: '提现状态',
						key: 'statusId',
						align: 'center',
						render: (h, params) => {
							if(this.conditionQuery[params.index].statusId == 1) {
								return h('div', '成功')
							} else if(this.conditionQuery[params.index].statusId == 2) {
								return h('div', '失败')
							} else if(this.conditionQuery[params.index].statusId == 3) {
								return h('div', '待审核')
							} else if(this.conditionQuery[params.index].statusId == 4) {
								return h('div', '已审核')
							} else if(this.conditionQuery[params.index].statusId == 5) {
								return h('div', '转账中')
							}
						}
					},
					{
						title: '备注',
						key: 'remark',
						align: 'center',
					},
					{
						title: '提交时间',
						key: 'createTime',
						align: 'center',
						sortable: true,
					},
					{
						title: '审核操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							if(this.conditionQuery[params.index].statusId == 3) {
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
										on: {
											click: () => {
												// 把记录 ID 传给审核按钮
												this.removeSuccess(this.conditionQuery[params.index].id);
											}
										}
									}, '通过'),
									h('Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										on: {
											click: () => {
												// 把记录 ID 传给审核按钮
												this.removeError(this.conditionQuery[params.index].id);
											}
										}
									}, '失败')
								]);
							} else {
								return h('div', [
									h(
										'Button', {
											props: {
												type: 'primary',
												size: 'small',
												disabled: true
											},
											style: {
												marginRight: '5px'
											},
										},
										'已审核'
									)
								])
							}
						}
					}
				]
			}
		},
		mounted() {
			this.$Message.config({ // 配置弹窗的位置
				top: 250
			});
			this.getWalletInfo(); // 获取总钱包信息
			this.getMoneySummary(); // 获取提币的汇总信息
			this.getQuery(); // 提现审核列表查询
		},
		methods: {
			getWalletInfo() { // 获取总钱包信息
				let token = localStorage.getItem("mytoken");
				this.axios.get('financial/wallet/0', {
					headers: {
						Authorization: "bearer " + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.walletInfo = res.data.data;
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem("mytoken");
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getMoneySummary() { // 获取提币的汇总信息
				let token = localStorage.getItem("mytoken");
				this.axios.get('financial/transferInfo', {
					headers: {
						Authorization: "bearer " + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.moneySummary = res.data.data;
					} else if(res.data.code == 4004) {
						this.$Message.info(res.data.message);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem("mytoken");
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getQuery() { // 提现审核列表查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					transferId: '', // 转账编号
					uuid: '', // 用户 uuid
					statusId: '', // 提现状态ID：1成功，2失败，3待审核，4，已审核，5转账中
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('financial/audits', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.data;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			cuctGetQuery(page) { // 提现审核列表分页查询
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					pn: page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					transferId: '', // 转账编号
					uuid: '', // 用户 uuid
					statusId: '', // 提现状态ID：1成功，2失败，3待审核，4，已审核，5转账中
					startTime: '2000-12-30 00:00:00', // 起始日期
					endTime: '2200-12-30 00:00:00' // 结束日期
				})
				this.axios.post('financial/audits', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008) {
						this.conditionQuery = res.data.data.data;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			getConditionQuery() { // 提现审核列表条件查询
				let spy;
				let token = localStorage.getItem("mytoken");
				if(this.query.state == 0) {
					spy = '';
				} else {
					spy = this.query.state;
				}
				let params = this.qs.stringify({
					pn: this.page, // 当前页【可选，默认1】
					size: this.pageSize, // 每页记录数【可选，默认20】
					transferId: this.query.id, // 转账编号
					uuid: this.query.userName, // 用户 uuid
					statusId: spy, // 提现状态ID：1成功，2失败，3待审核，4，已审核，5转账中
					startTime: this.dataValue[0] == '' ? '2000-12-30 00:00:00' : this.dataValue[0], // 起始日期
					endTime: this.dataValue[1] == '' ? '2200-12-30 00:00:00' : this.dataValue[1] // 结束日期
				})
				this.axios.post('financial/audits', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008 || res.data.code == 4004) {
						this.conditionQuery = res.data.data.data;
						this.info = res.data.data.total;
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			exportData() { // 导出
				this.$refs.table.exportCsv({
					filename: 'BTC提现审核'
				})
			},
			getTime(daterange) { // 处理时间段时间格式
				this.dataValue = daterange;
			},
			removeSuccess(index) { // 弹出审核提示
				this.model = true;
				this.modelIndex = index;
			},
			asyncOK () { // 审核通过,其中的 index 是上面传来的记录 ID
				let token = localStorage.getItem("mytoken");
				let params = this.qs.stringify({
					id: this.modelIndex,
					status: 4, // 通过2
					remark: ''
				})
				this.axios.post('financial/audit', params, {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 8008 || res.data.code == 4004) {
						setTimeout(() => {
		                    this.model = false;
		                    this.$Message.info(res.data.message);
							this.getQuery();
		                }, 500);
					} else if(res.data.code == 5501) {
						this.$Message.info(res.data.message);
						localStorage.removeItem('mytoken');
						this.$router.push({
							name: 'login'
						})
					}
				})
			},
			removeError(index) { // 审核失败,其中的 index 是上面传来的记录 ID
				this.$Modal.confirm({
					render: (h) => {
						return h('Input', {
							props: {
								value: this.value,
								autofocus: true,
								placeholder: '请输入审核失败的原因...'
							},
							on: {
								input: (val) => {
									this.value = val; // 当前输入的内容,传给下面的确定按钮
								}
							}
						})
					},
					onOk: () => { // 弹框的确定按钮
						let token = localStorage.getItem("mytoken");
						let params = this.qs.stringify({
							id: index,
							status: 2, // 失败4
							remark: this.value
						})
						this.axios.post('financial/audit', params, {
							headers: {
								Authorization: 'bearer ' + token
							}
						}).then(res => {
							if(res.data.code == 8008 || res.data.code == 4004) {
								this.$Message.info(res.data.message);
								this.getQuery();
							} else if(res.data.code == 5501) {
								this.$Message.info(res.data.message);
								localStorage.removeItem('mytoken');
								this.$router.push({
									name: 'login'
								})
							}
						})
					}
				})
			}
		}
	}
</script>